<link rel="stylesheet" href="../usr/themes/simcool/themeInner/style.css">
<div class="-title">
    <small>附加可选功能</small>
</div>
<div class="-fun-block">
    <div class="-fun-item" onclick="imgEle()">插入图片</div>
    <div class="-fun-item" onclick="imgGroup()">图片宫格</div>
    <div class="-fun-item" onclick="inputVideo()">插入视频</div>
    <div class="-fun-item" onclick="openMap_setLocation()">设置地理位置</div>
    <!-- <div class="-fun-item" onclick="do2('2')">内容菜单</div>
    <div class="-fun-item" onclick="do2('3')">iFrame</div>
    <div class="-fun-item" onclick="do2('4')">unsplash相册</div> -->
</div>

<div class="mapContainer">
    <div class="inner">
        <div id="map-container" style="height:calc(70vh - 30px)"></div>
        <div class="close-btn">
            <div class="-btn" onclick="closeWin()">关闭</div>
        </div>
    </div>
</div>


<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2MmZWqcsEELZVa2hNp3kE2MLlINhhaBh"></script>
<script>
    (() => {
        const area = document.querySelector('textarea')
        window.area = area ? area : null
    })()
    function imgGroup() {
        _tInput('<div class="---img-group">\n<img src="地址" alt="标题" />\n</div>')
    }
    function imgEle() {
        _tInput('<img src="地址" alt="标题" />')
    }
    function inputVideo() {
        _tInput('<video src="视频地址" controls></video>')
    }
    function _tInput(str) {
        const area = window.area
        if (!area) { console.warn('area not found'); return }
        //获取光标位置
        const startPos = area.selectionStart;
        const endPos = area.selectionEnd;
        //获取当前文本
        const currentText = area.value
        //在光标位置插入文本
        const newText = currentText.substring(0, startPos) + str + currentText.substring(endPos)
        //更新文本并设置光标位置
        area.value = newText
        area.selectionStart = area.selectionEnd = starPos + text.length
        //触发input
        const event = new Event('input', { bubbles: true })
        area.dispatchEvent(event)
    }
    function openMap_setLocation() {
        let tar = document.querySelector('.mapContainer')
        if (tar) {
            tar.classList.add('--active')
            openWin()
        }
    }


    function openWin() {
        const map = new BMapGL.Map('map-container'); // 创建Map实例
        map.centerAndZoom('葫芦岛市', 8); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);
        map.addEventListener('click', function (e) {
            //alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
            const lng = document.querySelector('input[name="fields[mapLng]"]')
            const lat = document.querySelector('input[name="fields[mapLat]"]')
            if (lng) {
                lng.value = e.latlng.lng
            }
            if (lat) {
                lat.value = e.latlng.lat
            }
            map.clearOverlays();
            const marker = new BMapGL.Marker(new BMapGL.Point(lng.value, lat.value));
            map.addOverlay(marker);
        })
    }
    function closeWin() {
        const win = document.querySelector('.mapContainer')
        if (win) {
            win.classList.remove('--active')
        }
    }
</script>